<template>
	<view class="myInfoContainer">
		<!-- 个人资料信息页面开始 -->
		<view class="myInfoCard">
			<view class="avatar">
				<image :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
				<img src="https://app.zbzedu.com/static/WaChat/img/photo.png" mode="aspectFill" v-if="!userInfo.avatar" />
			</view>
			<view class="userInfo">
				<view class="userName">
					<text>{{ userInfo.nickName || userInfo.userName || '未填写'}}</text>
				</view>
				<view class="userGrade">
					<text>所在年级：{{userInfo.className || '未填写'}}</text>
				</view>
			</view>
			<view class="userOption">
				<block>
					<navigator url="/package/forum/setting" class="tag" v-if="isCurrentUser">
						<text>设置</text>
					</navigator>
					<view v-else class="tag" @click="attention(info.attentionFlag)">
						<text>{{ info.attentionFlag ? '已关注' : '+关注'}}</text>
					</view>
				</block>
				<view class="hz">
					<text>获赞 <text class="u-m-l-10">{{info.allLikeNum || 0}}</text> </text>
				</view>
			</view>
		</view>
		<!-- 信息数量页面开始 -->
		<view class="infoContainer u-border-bottom">
			<view class="infoItem u-border-right" @click="toMyLog(info.diaryNum)">
				<text class="infoNum">
					{{info.diaryNum || 0}}
				</text>
				<text class="infoName">
					<text>日记</text>
				</text>
			</view>
			<view class="infoItem u-border-right" @click="toFollow(1, info.attNum)">
				<text class="infoNum">
					{{info.attNum || 0}}
				</text>
				<text class="infoName">
					<text>关注</text>
				</text>
			</view>
			<view class="infoItem" @click="toFollow(2, info.toBeAttNum)">
				<text class="infoNum">
					{{ info.toBeAttNum || 0}}
				</text>
				<text class="infoName">
					<text>被关注</text>
				</text>
			</view>
		</view>

		<!--目标职业-->
		<view class="bg-fff u-p-t-30 u-p-l-30 u-p-r-30"
			:class="{'u-p-b-8': !jobLength.length, 'u-p-b-30': jobLength.length}">
			<view class="title u-flex">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon1.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">目标职业</view>
				<view class="u-flex-1 u-text-right" v-if="isCurrentUser">
					<navigator url="/package/forum/job" class="edit-btn">编辑</navigator>
				</view>
			</view>
			<view class="content u-padding-22 u-p-b-0 u-flex u-flex-wrap">
				<block v-if="jobLength.length">
					<view class="job-tag" v-for="(item, index) in job" v-if="item" :key="index">{{item}}</view>
				</block>
				<view class="u-flex-1" v-else>
					<empty url="/package/forum/job" :showLine="false" :disabled="!isCurrentUser"
						:btn-string="isCurrentUser?`暂无目标职业，快去更新吧！`:`暂无目标职业`"></empty>
				</view>
			</view>
		</view>
		<u-gap height="10" bg-color="#E3E3E3"></u-gap>
		<!--成绩动态-->
		<view class="bg-fff u-p-t-30 u-p-l-30 u-p-r-30"
			:class="{'u-p-b-8': !schoolGradeList.length, 'u-p-b-30': schoolGradeList.length}">
			<view class="title u-flex">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon2.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">成绩动态</view>
				<view class="u-flex-1 u-text-right" v-if="isCurrentUser">
					<navigator url="/pages/user/achievement" class="edit-btn">更新</navigator>
				</view>
			</view>
			<view class="content u-padding-22 u-p-b-0 u-flex u-flex-wrap">
				<userEchart ref="echarts" :width="646" :height="450" v-if="schoolGradeList.length" />
				<view class="u-flex-1" v-else>
					<empty url="/pages/user/achievement" :showLine="false" :disabled="!isCurrentUser"
						:btn-string="isCurrentUser?`暂无成绩，快去更新吧！`:`暂无成绩`"></empty>
				</view>
			</view>
		</view>
		<u-gap height="10" bg-color="#E3E3E3"></u-gap>

		<!--学习心得-->
		<view class="bg-fff u-p-t-30">
			<view class="title u-flex u-p-l-30 u-p-r-30">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon3.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">学习心得</view>
				<view class="u-flex-1 u-text-right" v-if="isCurrentUser">
					<navigator url="/package/forum/publish?diaryType=学习心得" class="edit-btn">更新</navigator>
				</view>
			</view>
			<view class="content u-p-b-0">
				<Diary :showHeader="false" :border-bottom="false" :showMore="true" :info-data="study" v-if="study.id"
					@like-change="res => likeChange(index, res)" :show-type="false" :lineShow="false"></Diary>
				<view class="u-flex-1 u-p-b-30" v-else style="
		margin: 30rpx 0;">
					<empty  :lineShow="false" url="/package/forum/publish?diaryType=学习心得" :disabled="!isCurrentUser"
						:btn-string="isCurrentUser?`暂无学习心得，快去更新吧！`:`暂无学习心得`" ></empty>
				</view>
			</view>
		</view>
		<!--家长心得-->
		<view class="bg-fff u-p-t-30">
			<view class="title u-flex u-p-l-30 u-p-r-30">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon3.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">家长心得</view>
				<view class="u-flex-1 u-text-right" v-if="isCurrentUser">
					<navigator url="/package/forum/publish?diaryType=家长心得" class="edit-btn">更新</navigator>
				</view>
			</view>
			<view class="content u-p-b-0">
				<Diary :showHeader="false" :border-bottom="false" :showMore="true" :info-data="jiazhang" v-if="jiazhang.id"
					@like-change="res => likeChange(index, res)" :show-type="false" :lineShow="false"></Diary>
				<view class="u-flex-1 u-p-b-30" v-else style="margin: 30rpx 0;">
					<empty :lineShow="false" url="/package/forum/publish?diaryType=家长心得" :disabled="!isCurrentUser"
						:btn-string="isCurrentUser?`暂无家长心得，快去更新吧！`:`暂无家长心得`" :showLine="false"></empty>
				</view>
			</view>
		</view>
		<!--专家点评-->
		<view class="bg-fff u-p-l-30 u-p-r-30 u-p-t-30">
			<view class="title u-flex">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon4.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">专家点评</view>
			</view>
			<view class="content u-p-b-30">
				<view class="u-m-t-16 u-p-b-0 u-font-32" v-if="userInfo.expertReviews">
					{{userInfo.expertReviews}}
				</view>
				<view class="u-flex-1" v-else>
					<empty  disabled btn-string="暂无专家点评" :showLine="false"></empty>
				</view>
			</view>
		</view>
		<u-gap height="10" bg-color="#e3e3e3"></u-gap>
		<!--行动历史-->
		<view class="bg-fff u-p-l-30 u-p-r-30 u-p-t-30 u-p-b-30">
			<view class="title u-flex">
				<view class="title-circle flex-center u-flex u-m-r-10">
					<img src="https://app.zbzedu.com/static/WaChat/icon/forum/icon5.png" alt="">
				</view>
				<view class="font-b color-000 u-font-32">行动历史</view>
			</view>
			<view class="content u-p-b-0">
				<view class="u-m-t-16" v-if="userHistoryList.length">
					<u-table class="xdTable">
						<u-tr v-for="(item, index) in userHistoryList" :key="index">
							<u-td>{{ item.createTime }}</u-td>
							<u-td>{{ item.replyDesc }}</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="u-flex-1" v-else>
					<empty disabled btn-string="暂无行动历史" :showLine="false" ></empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../util/api";
	import empty from "../../pages/forum/components/empty";
	import Diary from "../../pages/forum/components/Diary";
	import userEchart from '../../components/userEchart'
	import {
		getCurrentFullPath
	} from "../../util/util";
	export default {
		components: {
			empty,
			Diary,
			userEchart
		},

		onHide() {
			this.schoolGradeList = []
		},

		data() {
			return {
				compassDiaryList: {},
				info: {},
				userInfo: {},
				schoolGradeList: [],
				userId: '',
				userHistoryList: [],
				study: {},
				jiazhang: {}
			}
		},

		onLoad(option) {
			if (option.id) {
				this.userId = option.id
			}
		},

		onShow() {
			this.getUserData()
		},

		computed: {
			job() {
				return [this.userInfo.goalJob1, this.userInfo.goalJob2, this.userInfo.goalJob3]
			},

			jobLength() {
				const arr = this.job.filter(item => {
					if (item != undefined && item != 'undefined') return item
				})
				return arr
			},

			isCurrentUser() {
				if (this.userId && this.userId != uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId) {
					return false
				}
				return true
			}
		},

		methods: {
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			},
			likeChange(index, data) {
				const {
					likeFlag,
					likeNum
				} = data
				this.$set(this.compassDiaryList[index], 'likeFlag', likeFlag)
				this.$set(this.compassDiaryList[index], 'likeNum', likeNum)
			},
			// 关注
			attention(flag) {
				if (flag) {
					request({
						url: '/system/attention/cancel/' + this.userInfo
						.userId, // '/system/attention/' + this.userInfo.userId,
						method: 'delete'
					}).then(res => {
						this.getUserData()
					})
				} else {
					request({
						url: '/system/attention',
						data: {
							attUId: this.userInfo.userId
						},
						method: 'post'
					}).then(res => {
						this.getUserData()
					})
				}
			},

			// 获取主页信息
			getUserData() {
				const uId = this.userId ? this.userId : uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
				request({
					url: "/system/CompassDiary/getMyDiaryInfo/" + uId,
					method: "get"
				}).then(res => {
					this.info = res.data
					this.compassDiaryList = res.data.compassDiaryList
					this.userInfo = res.data.compassNormalUser
					this.schoolGradeList = res.data.schoolGradeList
					this.userHistoryList = res.data.userHistoryList
					res.data.compassDiaryList.forEach(item => {
						if (item.diaryType === '学习心得') {
							this.study = item
						}
						if (item.diaryType === '家长心得') {
							this.jiazhang = item
						}
					})
					this.$nextTick(() => {
						this.$refs.echarts.initEcharts({
							data: res.data.schoolGradeList
						})
					})
				})
			},

			// 关注 type 1:关注列表  2：粉丝列表
			toFollow(type, num) {
				if (num < 1) {
					return
				}
				const uId = this.userId ? this.userId : uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
				this.$u.route({
					url: `/package/forum/concern?type=${type}&id=${uId}`
				})
			},

			toMyLog(num) {
				if (num > 0) {
					this.$u.route({
						url: 'package/forum/diaryList?id=' + this.userInfo.userId
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myInfoContainer {
		padding-bottom: 40rpx;

		.myInfoCard {
			height: 260rpx;
			padding: 32rpx;
			background-image: url("../../static/img/user_bg.png");
			background-size: cover;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 90rpx;
				}

				margin-right: 30rpx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .22),
				0 0 6px rgba(0, 0, 0, .24);
				border-radius: 90rpx;
			}

			.userInfo {
				flex: 3;
				display: flex;
				justify-content: space-around;
				flex-direction: column;

				.userName {
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.userGrade {
					font-weight: bold;
				}
			}

			.userOption {
				display: flex;
				flex-direction: column;
				align-items: center;

				.tag {
					width: 148rpx;
					border-radius: 10rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin-bottom: 20rpx;
					background-color: #2A6CAC;
					font-weight: bold;
				}
			}
		}

		// 信息数量页面样式
		.infoContainer {
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;

			.infoItem {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.infoNum {
					font-size: 36rpx;
					font-weight: bold;
				}

				.infoName {
					font-size: 24rpx;
				}
			}

		}

		.title-circle {
			border-radius: 100%;
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: rgba(230, 230, 230, 100);
			text-align: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.edit-btn {
			display: inline-block;
			width: 132rpx;
			height: 44rpx;
			line-height: 44rpx;
			border-radius: 20rpx;
			background-color: rgba(138, 187, 67, 100);
			text-align: center;
			color: #fff;
			font-size: 28rpx;
		}

		.job-tag {
			color: #fff;
			background-color: rgba(42, 108, 171, 100);
			font-size: 28rpx;
			text-align: center;
			padding: 8rpx 24rpx;
			border-radius: 30rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
